<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采集客户端管理</title>
    <link rel="stylesheet" href="element-ui.css">
    <style>
        html,body{
            margin: 0;
            height:100%;
        }
        .app-menu{
            height: 100%;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-main {
            background-color: #E9EEF3;
        }
    </style>
</head>
<body>
    <el-container id="app" style="height:100%;">
        <el-aside width="300px" >
            <el-menu
                    default-active="0-0"
                    class="app-menu"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-submenu :index="index+''" :key="index" v-for="(item, index) in apps">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>{{item.appName}}</span>
                    </template>
                    <el-menu-item :index="index+'-'+subindex" :key="index+'-'+subindex" v-for="(subitem, subindex) in item.nodes" @click="handleNodeClick(subitem)">
                        <template slot="title">
                            <i class="el-icon-success" style="color:#67C23A" v-if="subitem.status"></i>
                            <i class="el-icon-error" style="color:#F56C6C" v-else></i>
                            <span>{{subitem.hostName}}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main style="padding: 0px;" height="100%">
            <el-container style="height:100%;">
                <el-main>
                    <el-table
                            :data="settings"
                            border
                            style="width: 100%">
                        <el-table-column type="index" align="center" header-align="center"></el-table-column>
                        <el-table-column prop="collector" label="采集器类型" align="center" header-align="center"></el-table-column>
                        <el-table-column prop="enable" label="是否开启" align="center" header-align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.enable" active-value="true" inactive-value="false"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="period" label="上报周期（秒）" align="center" header-align="center">
                            <template slot-scope="scope" v-if="scope.row.period!==null">
                                <el-input-number v-model="scope.row.period" :min="1"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer style="text-align: center;">
                    <el-button type="primary" @click="dialogVisible = true">KyData全量执行</el-button>
                    <el-button type="primary" @click="saveSetting" :loading="saving">{{saving?'保存中':'保存'}}</el-button>
                </el-footer>
            </el-container>
        </el-main>

        <el-dialog
                title="Kylin Data设置全量更新参数"
                :visible.sync="dialogVisible"
                width="40%">
            <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="全量执行时间">
                    <el-date-picker
                            v-model="form.execTime"
                            type="datetime"
                            style="width: 100%;"
                            placeholder="选择时间">
                    </el-date-picker>
                    <span style="color: lightcoral">为空时全量更新在下一次执行</span>
                </el-form-item>
                <el-form-item label="更新数据起始时间">
                    <el-date-picker
                            v-model="form.beginTime"
                            type="datetime"
                            style="width: 100%;"
                            placeholder="选择时间">
                    </el-date-picker>
                    <span style="color: lightcoral">为空时则更新所有数据</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="!form.allDataUpdate" type="primary" @click="open">开 启</el-button>
                <el-button v-if="form.allDataUpdate" type="primary" @click="open">重新设定</el-button>
                <el-button v-if="form.allDataUpdate" type="primary" @click="close">关 闭</el-button>
              </span>
        </el-dialog>
    </el-container>
<script src="./vue.js"></script>
<script src="./element-ui.js"></script>
<script src="./axios.js"></script>
<!--<script src="./monitor.js"></script>-->
<script>

    var app = new Vue({
        el: '#app',
        data: {
            saving: false,
            apps: [],
            currNode: null,
            settings:[],
            form: {
                execTime: null,
                beginTime: null,
                allDataUpdate: false
            },
            dialogVisible: false
        },
        mounted: function () {
            this.loadClients();
            this.loadUpdateSetting();
        },
        methods: {
            loadClients() {
                var vm = this;
                axios.get('properties/clients')
                    .then(resp=>resp.data.data)
                    .then(data=>{
                        var apps = [];
                        var appObjs = {};
                        data.forEach(item => {
                            if(!appObjs[item.appName]){
                                var app = {appName:item.appName, nodes:[]};
                                apps.push(app);
                                appObjs[item.appName] = app;
                            }
                            appObjs[item.appName].nodes.push(item);
                        });
                        vm.apps = apps;
                        vm.currNode = data[0];
                        if(vm.currNode){
                            vm.loadColectorSettings(vm.currNode.appName, vm.currNode.hostName);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error.message);
                    });
            },
            loadColectorSettings(appName, hostName) {
                var vm = this;
                axios.get(`properties/settings?appName=${appName}&hostName=${hostName}`)
                    .then(resp=>resp.data.data)
                    .then(data=>{
                        vm.settings = data;
                    })
                    .catch(error => {
                        this.$message.error(error.message);
                    });
            },
            saveSetting(){
                this.saving = true;
                var vm = this;
                axios.post('properties/save', this.settings)
                    .then(resp=>resp.data)
                    .then(result => {
                        vm.saving = false;
                        this.$message.success('保存成功');
                    })
                    .catch(error => {
                        vm.saving = false;
                        this.$message.error(error.message);
                    });
            },
            handleNodeClick(node){
                this.currNode=node;
                this.loadColectorSettings(node.appName, node.hostName);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            loadUpdateSetting(){
                axios.get(`kylin/getSetting`)
                    .then(resp=>resp.data.data)
                    .then(data=> {
                        if (data.execTime && data.execTime > 0) {
                            this.form.execTime = new Date(data.execTime);
                        }else{
                            this.form.execTime = null;
                        }
                        if(data.beginTime && data.beginTime> 0){
                            this.form.beginTime = new Date(data.beginTime);
                        }else{
                            this.form.beginTime = null;
                        }
                        this.form.allDataUpdate = data.allDataUpdate;
                    })
                    .catch(error => {
                        this.$message.error(error.message);
                    });
            },
            open(){
                this.form.allDataUpdate = true;
                this.updateSetting();
            },
            close(){
                this.form.allDataUpdate = false;
                this.updateSetting();
            },
            updateSetting() {
                console.log(this.form);
                var url = "kylin/updateSetting?";
                if(this.form.allDataUpdate){
                    if (this.form.execTime) {
                        url += "execTime=" + this.form.execTime.getTime() + "&";
                    }
                    if (this.form.beginTime) {
                        url += "beginTime=" + this.form.beginTime.getTime() + "&";
                    }
                    url += "allDataUpdate=1";
                }
                axios.post(url)
                    .then(resp=>resp.data)
                    .then(result => {
                        this.dialogVisible = false;
                        this.loadUpdateSetting();
                    })
                    .catch(error => {
                        this.dialogVisible = false;
                    });
            }
        }
    });

</script>
</body>
</html>